<template>
	<view class="container">
		<block>
			<!-- 有封面图 -->
			<view class="userinfo" v-if="LoginUser" :style="{background: 'url(' + LoginUser.cover + ')'}">
				<!-- #ifdef MP-WEIXIN -->
				
				<!-- 头像 -->
				<view class="avatar">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				
				<!-- 昵称 -->
				<view class="nickname-carid">
					<open-data class="userinfo-nickname" type="userNickName"></open-data>
				</view>
				
				<view class="userinfo-carid" v-if="!LoginUser">
					<u-button type="success" shape="circle" @click="AuthLogin">授权登录</u-button>
				</view>
				<!-- #endif -->
				
				<!-- #ifdef H5 || APP-PLUS -->
				<view class="avatar">
					<image style="width: 100%; height:100%;" mode="aspectFill" :src="LoginUser.avatar"></image>
				</view>
							
				<view class="nickname-carid">
					<text class="userinfo-nickname" v-if="LoginUser.nickname">{{LoginUser.nickname}}</text>
					<text class="userinfo-nickname" v-else>临时用户</text>
				</view>
							
				<view class="userinfo-carid" v-if="!LoginUser">
					<u-button type="success" shape="circle" @click="Login()">用户登录</u-button>
				</view>
				<!-- #endif -->
				
				
			</view>
			
			<!-- 没有封面图 -->
			<view class="userinfo" v-else>
				<!-- 微信小程序 -->
				<!-- #ifdef MP-WEIXIN -->

				<!-- 头像 -->
				<view class="avatar">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				
				<!-- 昵称 -->
				<view class="nickname-carid">
					<open-data class="userinfo-nickname" type="userNickName"></open-data>
				</view>
				
				<view class="userinfo-carid" v-if="!LoginUser">
					<u-button type="success" shape="circle" @click="AuthLogin">授权登录</u-button>
				</view>
				<!-- #endif -->
				
				
				<!-- H5和APP端 -->
				<!-- #ifdef H5 || APP-PLUS -->
				<view class="avatar">
					<u-image width="100%" height="200px" src="/static/images/cover.jpg"></u-image>
				</view>
				
				<view class="nickname-carid">
					<text class="userinfo-nickname" v-if="LoginUser">{{LoginUser.nickname}}</text>
					<text class="userinfo-nickname">临时用户</text>
				</view>
				
				<view class="userinfo-carid" v-if="!LoginUser">
					<u-button type="success" shape="circle" @click="Login()">用户登录</u-button>
				</view>
				<!-- #endif -->
				
			</view>
			
			<!-- 用户菜单 -->
				<!-- 已经登陆 -->
				<view class="usermotto" v-if="LoginUser">
					<navigator class="profile-items" url="/pages/user/profile">
						<text>基本资料</text>
						<image src='/static/images/icons/row.png'></image>
					</navigator>
					<navigator class="profile-items" url="/pages/user/address/index">
						<text>收货地址</text>
						<image src='/static/images/icons/row.png'></image>
					</navigator>
					<navigator class="profile-items" url="/pages/project/index">
						<text>我的预约</text>
						<image src='/static/images/icons/row.png'></image>
					</navigator>
					<view class="profile-items" @click="ToRecord">
						<text>消费记录</text>
						<image src='/static/images/icons/row.png'></image>
					</view>
					<view class="profile-items" @click="callphone">
						<text>联系客服</text>
						<image src='/static/images/icons/row.png'></image>
					</view>
					<!-- #ifdef H5 || APP-PLUS -->
					<view class="profile-items" @click="logout">
						<text>退出登陆</text>
						<image src='/static/images/icons/row.png'></image>
					</view>
					<!-- #endif -->
				</view>
				
				<!-- 没有登录要提醒 -->
				<view class="usermotto" v-else>
					<view class="profile-items" @click="ToLogin">
						<text>基本资料</text>
						<image src='/static/images/icons/row.png'></image>
					</view>
					<view class="profile-items" @click="ToLogin">
						<text>收货地址</text>
						<image src='/static/images/icons/row.png'></image>
					</view>
					<view class="profile-items" @click="ToLogin">
						<text>我的预约</text>
						<image src='/static/images/icons/row.png'></image>
					</view>
					<view class="profile-items" @click="ToLogin">
						<text>消费记录</text>
						<image src='/static/images/icons/row.png'></image>
					</view>
					<view class="profile-items" @click="callphone">
						<text>联系客服</text>
						<image src='/static/images/icons/row.png'></image>
					</view>
				</view>
		</block>
		<u-toast ref="uToast"></u-toast>
		
		<!-- 模态框确认撤销 -->
		<u-modal :show="showdel" showCancelButton :content='content' @confirm="confirm" ref="uModal"
			@cancel="showdel = false"></u-modal>
		
	</view>
</template>

<script>
	export default {
		data(){
			return{
				LoginUser: null,
				ModalShow: false,
				showdel: false,
				content: '是否确认退出登陆?'
			}
		},
		onShow(){
			this.LoginUser = uni.getStorageSync('LoginUser')
		},
		methods:{
			AuthLogin(){
				uni.login({
				  provider: 'weixin',
				  success: async (res) => {
				   
				   let code = res.code ? res.code : '';
				   
				   if(!code){
					   
					   this.$refs.uToast.show({
					   	type: 'error',
					   	message: '临时登录凭证获取失败'
					   })
					   					
					   return false
				   }
					// 调用后台登陆接口
					let result = await this.$u.api.user.login({code: code});
					
					if(result.code == 0)
					{
						
						//授权失败提醒
						this.$refs.uToast.show({
							message: result.msg,
							type: 'error',
						})
					
						return false
					}
					
					//授权成功但是没有关联系统账号
					if(!result.data || JSON.stringify(result.data) == "{}"){
						this.$refs.uToast.show({
							message: '没有绑定帐号，请先绑定',
							type: 'error',
							complete() {
								//保留当前界面跳转到下一个界面最多20层
								uni.navigateTo({
									url: result.url
								})
							}
						})
						return false
					}
					
					//保存到缓存(本地存储)
					uni.setStorageSync('LoginUser', result.data)
					
					//关闭所有界面，强制跳转
					uni.reLaunch({
						url: '/pages/user/index'
					})
				  }
				});
			},
			ToLogin(){
				this.$refs.uToast.show({
					type: 'error',
					message: '请先登录'
				})
			},
			callphone(){
				uni.makePhoneCall({
					phoneNumber: '13060808099' //仅为示例
				});
			},
			Login(){
				uni.$u.route({
					url: 'pages/user/login'
				})
			},
			logout(){
				this.showdel = true
			},
			confirm(){
				this.showdel = false
				uni.removeStorageSync('LoginUser')
				uni.$u.route({
					url: 'pages/user/login'
				})
			},
			ToRecord(){
				uni.$u.route({
					url: 'pages/user/record'
				})
			}
		}
	}
</script>

<style>
	.login {
		margin: 400rpx;
	}

	.userinfo {
		width: 100%;
		padding: 40rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(rgb(1, 115, 222), rgb(78, 169, 245));
		color: white;
		background-size: cover!important;
	}

	.userinfo-avatar {
		width: 200rpx;
		height: 200rpx;
		margin: 30rpx;
		border-radius: 50%;
	}

	.nickname-carid,
	.userinfo-carid {
		font-size: 36rpx;
		margin: 10rpx 0;
	}

	.userinfo-carid {
		padding-bottom: 5rpx;
		font-size: 26rpx;
	}

	.usermotto {
		width: 100%;

	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.profile-items {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: auto;
		width: auto;
		padding: 20rpx 50rpx;
		border-bottom: 20rpx solid rgb(234, 234, 234);
		font-size: 26rpx;
		box-shadow: 0 0 10px #DDD;
	}

	.profile-items image {
		height: 36rpx;
		width: 36rpx;
	}

	.userinfo .avatar {
		display: block;
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		overflow: hidden;
	}
	.u-modal__content__text{
		text-align: center;
	}
	/*  #ifdef APP-PLUS ||  H5  */
	/deep/.u-modal__content__text{
		text-align: center;
	}
	/*  #endif  */
	
</style>

